<template>
  <div class="kaohepingjia">
    <!-- 绩效考核 -->
    <daiban id="daiban" name="绩效考核"></daiban>
    <!-- 月度绩效 -->
    <div>
      <daiban class="erjititle" name="月度绩效"></daiban>
      <el-form ref="monthform" :model="monthform" label-width="80px">
        <div id="monthbox">
          <div id="monthcontent" class="bcgcolor">
            <el-form-item label="考核时间" prop="khsj">
              <el-date-picker
                v-model="monthform.khsj"
                align="right"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="考核分数" prop="khfs">
              <el-input
                v-model="monthform.khfs"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="考核等级" prop="khdj">
              <el-input
                v-model="monthform.khdj"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('month')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem">
        <el-button @click="resetForm('monthform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('monthform')"
          >保存</el-button
        >
      </div>
    </div>
    <!-- 年度绩效 -->
    <div>
      <daiban class="erjititle" name="年度绩效"></daiban>
      <el-form ref="yearform" :model="yearform" label-width="80px">
        <div id="yearbox">
          <div id="yearcontent" class="bcgcolor">
            <el-form-item label="考核时间" prop="khsj">
              <el-date-picker
                v-model="yearform.khsj"
                align="right"
                type="monthrange"
                placeholder="选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="考核分数" prop="khfs">
              <el-input
                v-model="yearform.khfs"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="考核等级" prop="khdj">
              <el-input
                v-model="yearform.khdj"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('year')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem">
        <el-button @click="resetForm('yearform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('yearform')"
          >保存</el-button
        >
      </div>
    </div>
    <!-- 思政绩效 -->
    <div>
      <daiban class="erjititle" name="思政绩效"></daiban>
      <el-form ref="szform" :model="szform" label-width="80px">
        <div id="sizhengbox">
          <div id="sizhengcontent" class="bcgcolor">
            <el-form-item label="考核时间" prop="khsj">
              <el-date-picker
                v-model="szform.khsj"
                align="right"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="考核分数" prop="khfs">
              <el-input
                v-model="szform.khfs"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="考核等级" prop="khdj">
              <el-input
                v-model="szform.khdj"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('sizheng')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem xuxian">
        <el-button @click="resetForm('szform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('szform')"
          >保存</el-button
        >
      </div>
    </div>

    <!-- 奖惩 -->
    <daiban id="daiban" name="奖惩"></daiban>
    <!-- 竞赛奖励 -->
    <div>
      <daiban class="erjititle" name="竞赛奖励"></daiban>
      <el-form ref="jsjlform" :model="jsjlform" label-width="80px">
        <div id="rewardbox">
          <div id="rewardcontent" class="bcgcolor">
            <el-form-item label="获奖名称" prop="hjmc">
              <el-input
                v-model="jsjlform.hjmc"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="奖励单位" prop="jldw">
              <el-input
                v-model="jsjlform.jldw"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="获奖级别" prop="hjjb">
              <el-select
                clearable
                v-model="jsjlform.hjjb"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in grade"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="奖励等次" prop="jldc">
              <el-input
                v-model="jsjlform.jldc"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="奖励时间" prop="jlsj" class="jukuan">
              <el-date-picker
                v-model="jsjlform.jlsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('reward')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem">
        <el-button @click="resetForm('jsjlform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('jsjlform')"
          >保存</el-button
        >
      </div>
    </div>

    <!-- 荣誉称号 -->
    <div>
      <daiban class="erjititle" name="荣誉称号"></daiban>
      <el-form ref="rychform" :model="rychform" label-width="80px">
        <div id="honorbox">
          <div id="honorcontent" class="bcgcolor">
            <el-form-item label="荣誉名称" prop="rymc">
              <el-input
                v-model="rychform.rymc"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="授予单位" prop="sydw">
              <el-input
                v-model="rychform.sydw"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="荣誉级别" prop="ryjb">
              <el-select
                clearable
                v-model="rychform.ryjb"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in grade"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="授予时间" prop="sysj" class="jukuan">
              <el-date-picker
                v-model="rychform.sysj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('honor')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem xuxian">
        <el-button @click="resetForm('rychform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('rychform')"
          >保存</el-button
        >
      </div>
    </div>

    <!-- 惩罚 -->
    <div>
      <daiban class="erjititle" name="惩罚"></daiban>
      <el-form ref="cfform" :model="cfform" label-width="80px">
        <div id="punishmentbox">
          <div id="punishmentcontent" class="bcgcolor">
            <el-form-item label="惩罚级别" prop="cfjb">
              <el-input
                v-model="cfform.cfjb"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="惩罚原因" prop="cfyy">
              <el-input
                v-model="cfform.cfyy"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="认定单位" prop="rddw">
              <el-input
                v-model="cfform.rddw"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="影响时效" prop="kssj" class="jukuan">
              <el-date-picker
                v-model="cfform.kssj"
                align="right"
                type="monthrange"
                placeholder="选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button @click="copeitem('punishment')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <div class="lastitem">
        <el-button @click="resetForm('cfform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('cfform')"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import $ from "../../assets/jquery.min.js";
import ajax from "../../api/ajax.js";
import qs from "qs";
import daiban from "../../components/title/subTitle.vue";
export default {
  components: {
    daiban,
  },
  props: { cldgh: { type: String } },
  data() {
    return {
      //月度绩效数据
      monthform: {
        gh: "",
        khsj: "",
        khlx: "1",
        khdj: "",
        khfs: "",
      },
      //年度绩效数据
      yearform: {
        gh: "",
        khsj: "",
        khlx: "2",
        khdj: "",
        khfs: "",
      },
      //思政绩效数据
      szform: {
        gh: "",
        khsj: "",
        khlx: "3",
        khdj: "",
        khfs: "",
      },
      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //竞赛奖励数据
      jsjlform: {
        gh: "",
        hjjb: "",
        hjmc: "",
        jldc: "",
        jldw: "",
        jlsj: "",
      },
      //荣誉称号数据
      rychform: {
        gh: "",
        ryjb: "",
        rymc: "",
        sydw: "",
        sysj: "",
      },
      //惩罚数据
      cfform: {
        gh: "",
        rddw: "",
        kssj: "",
        jssj: "",
        cfyy: "",
        cfjb: "",
      },
      //获奖级别
      grade: [
        {
          value: "院级",
          label: "院级",
        },
        {
          value: "校级",
          label: "校级",
        },
        {
          value: "省级",
          label: "省级",
        },
        {
          value: "国家级",
          label: "国家级",
        },
      ],
    };
  },
  methods: {
    //重置
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    //提交
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (formName == "monthform") {
            this.monthform.gh = this.cldgh;
            if (this.monthform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/jxkh",
                qs.stringify(this.monthform),
                "post"
              );
              alert("这是月度考核");
            }
          }
          if (formName == "yearform") {
            this.yearform.gh = this.cldgh;
            console.log(this.yearform.khsj[0]);
            this.yearform.khsj =
              this.yearform.khsj[0] + "-" + this.yearform.khsj[1];
            console.log(this.yearform.khsj);
            if (this.yearform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/jxkh",
                qs.stringify(this.yearform),
                "post"
              );
              alert("这是年度考核");
            }
          }
          if (formName == "szform") {
            this.szform.gh = this.cldgh;
            if (this.szform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/jxkh",
                qs.stringify(this.szform),
                "post"
              );
              console.log(this.szform, "------", result);
              alert("这是思政考核");
            }
          }
          if (formName == "jsjlform") {
            this.jsjlform.gh = this.cldgh;
            if (this.jsjlform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "jsjl",
                qs.stringify(this.jsjlform),
                "post"
              );
              console.log(this.jsjlform, "------", result);
              alert("这是竞赛奖励");
            }
          }
          if (formName == "rychform") {
            this.rychform.gh = this.cldgh;
            if (this.rychform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/rych",
                qs.stringify(this.rychform),
                "post"
              );
              console.log(this.rychform, "------", result);
              alert("这是荣誉称号");
            }
          }
          if (formName == "cfform") {
            this.cfform.gh = this.cldgh;
            console.log( this.cfform.kssj)
            this.cfform.jssj = this.cfform.kssj[1];
            this.cfform.kssj = this.cfform.kssj[0];
            if (this.cfform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/cf",
                qs.stringify(this.cfform),
                "post"
              );
              console.log(this.cfform, "------", result);
              alert("这是惩罚");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    copeitem(type) {
      if (type == "month") {
        console.log(444);
        const $orig = $("#monthcontent:first").clone(true);
        $("#monthbox").append($orig);
      }
      if (type == "year") {
        const $orig = $("#yearcontent:first").clone(true);
        $("#yearbox").append($orig);
      }
      if (type == "sizheng") {
        const $orig = $("#sizhengcontent:first").clone(true);
        $("#sizhengbox").append($orig);
      }
      if (type == "reward") {
        const $orig = $("#rewardcontent:first").clone(true);
        $("#rewardbox").append($orig);
      }
      if (type == "honor") {
        const $orig = $("#honorcontent:first").clone(true);
        $("#honorbox").append($orig);
      }
      if (type == "punishment") {
        const $orig = $("#punishmentcontent:first").clone(true);
        $("#punishmentbox").append($orig);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.kaohepingjia {
  width: 100%;
  height: 768px;
  overflow: auto;
}
#sizhengcontent,
#monthcontent,
#rewardcontent,
#yearcontent,
#punishmentcontent,
#honorcontent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 66px;
  padding-top: 22px;
  width: 100%;
  .el-form-item {
    margin-left: 35px;
    width: 415px;
    margin-bottom: 22px;
  }
}
#rewardcontent,
#punishmentcontent,
#honorcontent {
  height: 126px;
}
</style>